<template>
	<div class="layout">
		<Layout>
			<Header :style="{ padding: 0 }">
				<h3 class="logo">
					学习题后台管理系统
				</h3>
				<div class="user-info">
					<Dropdown @on-click="dropdown">
						<Avatar icon="ios-person" size="large" />
						<DropdownMenu slot="list">
							<DropdownItem :style="{ textAlign: 'center' }" name="logout">
								<Icon type="md-log-out" />
								<b class="dropdown-text">注销</b>
							</DropdownItem>
						</DropdownMenu>
					</Dropdown>
				</div>
			</Header>
			<Layout>
				<Sider
					:collapsed-width="78"
					v-model="isCollapsed"
					ref="side"
					hide-trigger
					collapsible
				>
					<div class="sider-content">
						<Menu
							theme="dark"
							:active-name="defaultActive"
							:open-names="openNames"
							width="210px"
							ref="menu"
							accordion
						>
							<Submenu
								v-for="menuItem in menuList"
								:key="menuItem.id"
								:name="menuItem.id"
							>
								<template slot="title">
									<Icon :type="menuItem.icon" class="menu-item-icon" />
									<span class="menu-item-title">{{ menuItem.name }}</span>
								</template>
								<MenuItem
									v-for="subItem in menuItem.children"
									:key="subItem.id"
									:name="subItem.path"
									:to="subItem.path"
								>
									<Icon :type="subItem.icon" />
									<span>{{ subItem.name }}</span>
								</MenuItem>
							</Submenu>
						</Menu>
					</div>
				</Sider>
				<Content>
					<Card shadow>
						<Tabs
							type="card"
							closable
							:value="currentTab"
							@on-tab-remove="tabRemove"
							@on-click="tabClick"
						>
							<TabPane
								v-for="tab in tabs"
								:key="tab.path"
								:label="tab.label"
								:name="tab.path"
								:closable="tab.closable"
								:icon="tab.icon"
							></TabPane>
						</Tabs>
						<transition name="move">
							<keep-alive :include="/Add$/">
								<router-view />
							</keep-alive>
						</transition>
					</Card>
				</Content>
			</Layout>
		</Layout>
	</div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
import { TABS } from '@/store/mutation-types.js'

export default {
	name: 'home',
	data() {
		return {
			isCollapsed: false,
			defaultActive: '',
			currentTab: '/index',
			openNames: []
		}
	},
	computed: {
		...mapState({
			tabs: state => state.menu.tabs,
			menuList: state => state.menu.menuList
		})
	},
	methods: {
		...mapMutations({ setTabs: TABS }),
		dropdown(name) {
			const actions = {
				logout: async () => {
					const res = await this.$http.logout()
					if (res.success) {
						this.$Message.success('注销成功')
						window.localStorage.removeItem('token')
						this.$router.push({ name: 'login' })
					}
				}
			}
			actions[name]()
		},
		setMenu(path) {
			if (path == this.defaultActive) return

			const index = this.menuList.findIndex(menu =>
				menu.children.some(o => o.path == path)
			)

			this.openNames = [String(index)]
			this.defaultActive = path

			this.$nextTick(() => {
				this.$refs['menu'].updateOpened()
			})
		},
		addTab(path) {
			if (this.tabs.some(o => o.path == path)) {
				this.currentTab = path
				return
			}

			const tab = {
				label: '',
				closable: true,
				icon: '',
				path
			}

			this.menuList.some(menu => {
				const el = menu.children.find(o => o.path == path)

				if (el) {
					tab.label = el.name
					tab.icon = el.icon
					return true
				}
			})

			if (tab.label) {
				this.currentTab = tab.path
				this.setTabs([...this.tabs, tab])
			}
		},
		tabClick(path) {
			if (path != this.defaultActive) {
				this.$router.push(path)
			}
		},
		tabRemove(path) {
			let index
			this.setTabs(
				this.tabs.filter((o, idx) => {
					if (o.path == path) {
						index = idx
						return false
					}
					return true
				})
			)

			if (this.currentTab == path) {
				if (index && this.tabs[index - 1]) {
					this.$router.push(this.tabs[index - 1].path)
				} else {
					this.$router.push('/index')
				}
			}
		}
	},
	created() {
		this.$nextTick(() => {
			this.setMenu(this.$route.path)
		})
		this.addTab(this.$route.path)
	},
	beforeRouteUpdate(to, from, next) {
		console.log('路由跳转')
		this.setMenu(to.path)
		this.addTab(to.path)
		next()
	}
}
</script>

<style lang="less" scoped>
@import url('./home.less');
</style>
